<template>
  <div class="zhongzi">
    <!-- 顶部搜索栏 -->
    <view class="sticky top-0 bg-white px-4 py-2">
      <view class="flex items-center bg-gray-100 rounded-full px-4 py-2">
        <uni-icons type="search" size="20" color="#666"></uni-icons>
        <input type="text" placeholder="搜索关键字" class="ml-2 flex-1" />
      </view>
    </view>

    <!-- 功能图标区 -->
    <view class="grid grid-cols-4 gap-4 p-4">
      <view v-for="(item, index) in menuItems" :key="index" class="flex flex-col items-center">
        <view class="w-12 h-12 rounded-lg flex items-center justify-center mb-1 bg-gray-200">
          <text :class="item.icon" class="text-3xl text-white m-2 text-bold"></text>
          <!-- <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons> -->
        </view>
        <text class="text-xs text-gray-600">{{ item.title }}</text>
      </view>
    </view>

    <!-- 课程区域 -->
    <view class="px-4">
      <view class="flex justify-between items-center mb-4">
        <text class="text-lg font-bold">福慧双修精品课</text>
        <text class="text-gray-500">查看更多 ></text>
      </view>

      <view class="bg-white rounded-lg shadow mb-4" v-for="course in courses" :key="course.id">
        <image :src="course.image" mode="aspectFill" class="w-full h-40 rounded-t-lg" />
        <view class="p-3">
          <text class="text-lg font-medium">{{ course.title }}</text>
          <view class="flex items-center mt-2">
            <text class="text-red-500 text-lg font-bold">¥{{ course.price }}</text>
            <text class="line-through text-gray-400 ml-2">¥{{ course.originalPrice }}</text>
            <text class="ml-auto text-gray-400">{{ course.students }}人订阅</text>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
const menuItems = [
  { title: '领取价值3万福', icon: 'icon-zhongzi', bgColor: '#4080FF' },
  { title: '申请推广员', icon: 'icon-emizhongzi', bgColor: '#8A2BE2' },
  { title: '福慧双修精品课', icon: 'icon-zhongzi1', bgColor: '#4080FF' },
  { title: '学院简介和缘起', icon: 'icon-zhongzishangpin', bgColor: '#FFA500' },
  { title: '艳芬公众号', icon: 'icon-jinzhongzi', bgColor: '#4080FF' },
  { title: '艳芬视频号', icon: 'icon-31siliaozhongzi', bgColor: '#FF4D4F' },
  { title: '艳芬故事', icon: 'icon-zhongzi2', bgColor: '#40D0B0' },
  { title: '种子读书会', icon: 'icon-zhongzi3', bgColor: '#FF4D4F' },
  { title: '数字个案预约', icon: 'icon-zhongzizhongmiao', bgColor: '#FFA500' },
  { title: '咨询师海报申请', icon: 'icon-zhongzi4', bgColor: '#40D0B0' },
  { title: '学院课程介绍', icon: 'icon-zhongzigaojing', bgColor: '#FFA500' },
  { title: '公益录音', icon: 'icon-a-MATE_huaban1fuben63', bgColor: '#40D0B0' },
]

const courses = [
  {
    id: 1,
    title: '"圆融关系"福慧双修精品课（无收获秒退款）',
    image: 'https://p2.itc.cn/images01/20210618/8d788680bcbc4e1ca1223641eab7c2a6.png',
    price: 999,
    originalPrice: 1999,
    students: 7958,
  },
  {
    id: 2,
    title: '圆融关系｜免费公益课合集',
    image: 'http://shuangyi08.oss-cn-zhangjiakou.aliyuncs.com/cb052202410261136346146.png',
    price: 0,
    originalPrice: 0,
    students: 15000,
  },
]
</script>

<style lang="scss">
.zhongzi {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>
